<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange">
              <el-table-column
                  label="用户编号"
                  prop="userId"
                  width="260">
              </el-table-column>
              <el-table-column
                  label="用户名"
                  prop="username"
                  width="260">
              </el-table-column>
              <el-table-column
                  label="密码"
                  prop="password"
                  width="260">
              </el-table-column>
              <el-table-column
                  :formatter="questionData"
                  label="用户角色"
                  prop="questions"
                  width="400">
              </el-table-column>
              <el-table-column
                  label="用户角色"
                  prop="realName"
                  width="260">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                :current-page=currentPage
                :page-size=pageSize
                :total=totalSize
                background
                layout="prev, pager, next"
                @current-change="currentPageFn">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>


    <el-dialog
        :visible.sync="updateInfo"
        title="更新用户信息"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="用户名称">
          {{ currentRow.username }}
        </el-form-item>
        <el-form-item label="真实姓名">
          {{ currentRow.realName }}
        </el-form-item>
        <el-form-item label="角色">
          <el-checkbox-group v-model="checkList" @change="changeLevelShow">
            <el-checkbox v-for="(item,i) in roleList" :key="i" v-bind:label=item.roleId>{{
                item.roleName
              }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="权限">
          <el-tag v-for="(item2,i2) in levelList" :key="i2" style="margin: 5px" type="success">
            {{ item2 }}
          </el-tag>
        </el-form-item>
      </el-form>
      <el-button plain type="primary" @click="update">点击更新</el-button>
    </el-dialog>


    <el-dialog
        :visible.sync="addInfo"
        title="添加新用户"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="用户名称">
          <el-input v-model="newUsername" placeholder="用户名称" style="margin-top: 25px"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="newRealName" placeholder="真实姓名" style="margin-top: 25px"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-checkbox-group v-model="checkList" @change="changeLevelShow">
            <el-checkbox v-for="(item,i) in roleList" :key="i" v-bind:label=item.roleId>{{
                item.roleName
              }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="权限">
          <el-tag v-for="(item2,i2) in levelList" :key="i2" style="margin: 5px" type="success">
            {{ item2 }}
          </el-tag>
        </el-form-item>
      </el-form>
      <el-button plain type="primary" @click="addU">点击添加</el-button>
    </el-dialog>


    <div style="display: flex;justify-content: center">
      <el-row style="margin: 25px;width: 200px">
        <el-input v-model="searchName" placeholder="用户名称" style="margin-top: 25px"></el-input>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-button plain type="primary" @click="findByItem">查询</el-button>
        <el-button plain type="primary" @click="showUserById">更新用户角色信息</el-button>
        <el-button plain type="primary" @click="addUser">添加新的用户</el-button>
        <el-popover
            v-model="visible"
            placement="top"
            style="margin-left: 10px" width="160">
          <p>你确定要进行用户删除么</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button size="mini" type="primary" @click="delUser">确定</el-button>
          </div>
          <el-button slot="reference" type="danger">删除用户</el-button>
        </el-popover>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserManage",
  data() {
    return {
      tableData: [],
      totalSize: 0,//总行数
      pageSize: 0,//当前显示数据页
      currentPage: 0,//当前页码
      currentRow: 0,//当前选中列
      searchName: '',
      updateInfo: false,
      addInfo: false,
      newUsername: '',
      newRealName: '',
      visible: false,
      checkList: [],
      roleList: [],
      levelList: [],
      //循环生成单个单元格中的多个权限信息
      questionData(row) {
        let arr = []
        row.roleBeanList.forEach((item, index) => {
          arr.push(item.roleName);
        })
        return arr.join(',')
      }
    }
  }, mounted() {
    this.showPage()
    this.showRole()
  },
  methods: {
    handleCurrentChange(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    },
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.showPage()
    },
    findByItem() {
      this.showPage()
    },
    showPage() {
      if (this.searchName === '') {
        this.searchName = 1
      }
      let url = "api/user/showUserByPage/" + this.currentPage + "/" + this.searchName;
      this.axios.get(url).then(
          r => {
            this.tableData = r.data.list
            this.totalSize = r.data.total
            this.pageSize = r.data.pageSize
          }
      )
      this.searchName = ''
      this.searchScope = ''
    },
    showSupplierById() {
      this.showInfoById = true
      console.log("current:" + this.currentRow)
    },
    showRole() {
      let url = "api/role/showAllRole"
      this.axios.get(url).then(r => {
        console.log(r.data)
        this.roleList = r.data
      })
    },
    changeLevelShow() {
      this.levelList = []
      //创建一个角色id集合
      console.log("che=" + this.checkList)
      for (let x = 0; x < this.checkList.length; x++) {
        let url = "api/role/showRoleById/" + this.checkList[x]
        this.axios.get(url).then(r => {
          for (let i = 0; i < r.data.levelBeanList.length; i++) {
            this.levelList.push(r.data.levelBeanList[i].levelName)
          }
          this.levelList = this.unique(this.levelList)
        })
      }
    },
    unique(arr) {
      let ret = []
      let hash = {}
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        let key = typeof (item) + item
        if (hash[key] !== 1) {
          ret.push(item)
          hash[key] = 1
        }
      }
      return ret
    },
    showUserById() {
      this.$forceUpdate()
      if (this.currentRow === 0) {
        this.messageShow("没有选中用户", "请选中后再进行查看")
        return
      }
      this.showRole()
      this.updateInfo = true
    }, update() {
      let userId = this.currentRow.userId
      let url = "api/user/updateUserById/" + userId + "/" + this.checkList
      this.axios.post(url).then(r => {
        this.messageShow("", r.data.info)
        this.showPage()
      })
      this.updateInfo = false
      this.showPage()
    },
    delUser() {
      if (this.currentRow === 0) {
        this.messageShow("没有选中用户", "请选中后再进行删除")
        return
      }
      let url = "api/user/delUserById/" + this.currentRow.userId
      this.axios.delete(url).then(r => {
        this.messageShow("", r.data.info)
        this.showPage()
        this.visible = false
      })
    },
    addUser() {
      this.addInfo = true
    },
    addU() {
      if (this.newUsername === "" || this.newRealName === "") {
        this.messageShow("无法添加", "关键信息还未填写")
        return;
      }
      if (this.checkList.length === 0) {
        this.messageShow("无法添加", "角色信息未填写")
        return;
      }

      let url = "api/user/addUser/" + this.newUsername + "/" + this.newRealName + "/" + this.checkList
      this.axios.post(url).then(r => {
        this.messageShow("", r.data.info)
        this.showPage()
      })
      this.addInfo = false
      this.showPage()
    },
    messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      });
    }
  }
}
</script>

<style scoped>

</style>